<!--
 - Copyright 2022. Huawei Technologies Co., Ltd. All rights reserved.

 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at

 -   http://www.apache.org/licenses/LICENSE-2.0

 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
 -->

<!-- 运动时间、电量 -->
<template>
    <div class="exercise_container" :style="{ 'background-color': background }">
        <div class="left" :class="{grayStyle: !connected, 'rtl-l text-r': $rtl}">
            <p class="value">00:00:26</p>
            <p class="desc">{{ $t('BDT_fascialgun_running_time') }}</p>
        </div>
        <div class="divider" :class="{grayStyle: !connected}"></div>
        <div class="right" :class="{grayStyle: !connected, 'rtl-l': $rtl}">
            <div>
                <span class="value">100</span>
                <span class="unit">%</span>
            </div>
            <div class="desc">{{ $t('BDT_fascialgun_battery_level') }}</div>
        </div>
    </div>
</template>
<script>
// 引入vuex辅助函数，mapState：获取变量
import { mapState } from 'vuex';

export default {
    props: {
        lastData: {
            type: Object
        }
    },
    data(){
        return {
            background: window.isDark ? '#202224' : '#FFFFFF'
        }
    },
    computed: {
        ...mapState([ 'connected' ])
    }
}
</script>
<style scoped>
    .exercise_container{
        height: 8.8rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-radius: 1.6rem;
        align-items: center;
    }
    
    .left, .right{
        width: 49%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .divider{
        height: 3.6rem;
        opacity: .2;
        border-right: 1px solid #000;
        transform: scaleX(.5);
    }

    .value{
        font-size: 2.4rem;
    }

    .unit{
        margin-left: .1rem;
    }

    .desc{
        opacity: .6;
        font-size: 1.2rem;
    }

    .grayStyle{
        opacity: .4;
    }
</style>